<template>
    <div class="blog-detail">
        <!-- 标题 -->
        <h3>{{ blog.title }}</h3>

        <!-- 博客所属信息 -->
        <van-row type="flex" align="center">
            <img :src="avatarUrl" alt="头像" />

            <span>{{ blog.nickname }}</span>

            <span>{{ blog.create_time | dateFormat }}</span>
        </van-row>

        <!-- 博客内容 -->
        <p>{{ blog.content }}</p>

        <!-- 华丽的分隔线 -->
        <van-divider
            :style="{
                color: '#1989fa',
                borderColor: '#1989fa',
                padding: '0 16px',
            }"
        >
            评论区
        </van-divider>

        <!-- 评论按钮 -->
        <van-row type="flex" justify="space-between">
            <span>评论 {{ commentList.length }}</span>
            <span @click="addCommentVisiable = true">发表评论</span>
        </van-row>

        <!-- 评论列表 -->
        <van-row
            :gutter="10"
            class="comment-list-item"
            v-for="comment in commentList"
            :key="comment.id"
        >
            <van-col span="4">
                <img :src="avatarUrl" alt="头像" />
            </van-col>

            <van-col span="20">
                <van-row>{{ comment.uid }}</van-row>
                <div class="van-multi-ellipsis--l3">
                    {{ comment.content }}
                </div>
                <van-row type="flex" justify="space-between">
                    <span>{{ comment.create_time | dateFormat }}</span>

                    <span>12 <van-icon name="like-o"/></span>
                </van-row>
            </van-col>
        </van-row>

        <!-- 空评论 -->
        <van-empty description="暂无评论" v-show="commentList.length === 0" />

        <!-- 添加评论 AS -->
        <van-action-sheet v-model="addCommentVisiable" title="评论区">
            <!-- 评论区 -->
            <van-field
                class="comment-area"
                v-model="comment"
                rows="2"
                autosize
                type="textarea"
                maxlength="100"
                placeholder="请输入评论内容"
                show-word-limit
            />

            <!-- 发表评论按钮 -->
            <van-button icon="plus" type="primary" @click="handleAddComment"
                >发表</van-button
            >
        </van-action-sheet>
    </div>
</template>

<script>
import avatarUrl from "@/assets/logo.png";
export default {
    async created() {
        await this.getDetail();
        this.getCommentList();
    },
    data() {
        return {
            blog: {},
            avatarUrl,
            addCommentVisiable: false,
            comment: "",
            commentList: [],
        };
    },
    methods: {
        async getDetail() {
            const id = this.$route.params.id;
            const res = await this.$http.get(`/blogs/${id}`);
            this.blog = res.data;
        },
        async getCommentList() {
            const res = await this.$http.get(`/blogs/${this.blog.id}/comments`);
            if (res.code !== 200) {
                this.$notify({
                    type: "danger",
                    message: res.message,
                });
                return;
            }
            console.log(res.data);
            this.commentList = res.data;
        },
        async handleAddComment() {
            const res = await this.$http.post("/comments", {
                content: this.comment,
                bid: this.blog.id,
            });
            // 评论出错了，提示错误
            if (res.code !== 201) {
                this.$notify({
                    type: "danger",
                    message: res.message,
                });
                return;
            }
            // 提示评论成功
            this.$notify({
                type: "success",
                message: "评论成功",
                duration: 1000,
            });
            // 重新渲染评论列表
            this.getCommentList();
            // 关闭 AS
            this.addCommentVisiable = false;
        },
    },
};
</script>

<style lang="less" scoped>
.blog-detail {
    padding: 10px;

    img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #eee;
        margin-right: 5px;
    }

    span {
        margin-right: 15px;
    }

    .comment-list-item {
        border: 1px solid #eee;
    }

    .van-action-sheet {
        padding-bottom: 60px;
    }

    .van-button {
        width: 100%;
    }
}
</style>
